<!DOCTYPE html>
<html>

<head>
    <title>WebTerminal</title>
    <link rel="stylesheet" href="./node_modules/xterm/css/xterm.css" />
    <script src="./node_modules/xterm/lib/xterm.js"></script>
</head>

<body>
    <div style="width: 736px; height: 408px;">
        <!-- 目前版本的 Xterm 5.1.0 默认串口大小 24x80 -->
        <div id="terminal"></div>
    </div>
    <script>
        const term = new Terminal();

        term.open(document.querySelector('#terminal')); // 挂载

        const socket = new WebSocket(`ws://${window.location.host}/webterminal`); // 创建WebSocket连接

        term.onData((data) => { // 网页xterm窗口中有输入的数据
            // console.log('term.onData:', data);
            socket.send(data); // 通过WebSocket发送给服务器
        });
        
        socket.onmessage = (event) => { // 收到来自服务器的WebSocket消息
            // console.log('socket.onmessage:', event.data);
            term.write(event.data); // 向xterm对象写入数据
        };
    </script>
</body>

</html>